<template>
  <div id="big">
    <div id="big_ttt">
      <div id="bai">
          <div id="lunbo" >
        <el-carousel height="400px" direction="horizontal" :autoplay="false" >
          <el-carousel-item v-for="item in imgs" >
            <a :href="item.linkUrl">
              <img :src="item.imageUrl" width="100%" height="400">
            </a>
          </el-carousel-item>
        </el-carousel>
        <div id="daohang" @mouseleave="hideWidth" style="visibility: visible">
          <div id="caidan" style="overflow-y: hidden">
            <ul style="height: 100%;" >
              <li @mouseenter="changeWidth(item,this)" @click="cources(item.id)" @mouseleave="back(item)" :ref="item.title"
                  v-for="item in menuData" class="caidan_li" :value="item.title">
                <div class="caidan_big">
                  <el-link :underline="false" style="color: #dddddd"> {{ item.title }}</el-link>
                 <span style="float: right;padding-right: 20px">
                    <i class="el-icon-arrow-right"></i>
                 </span>
                </div>
              </li>
            </ul>
          </div>
          <div id="zi" v-if="aaa">
            <ul>
              <li v-for="item in children">
                <div class="zi_div">
                  <div class="zi_div2" style="text-align: left">
                    <el-link :underline="false" style="display: inline-block;margin-left: 10px" @click="cources(item.id)"><b>{{ item.title }}</b></el-link>
                  </div>
                  <div class="zi_div3" style="">
                    <ul >
                      <li v-if="item.children.length>0" v-for="it in (item.children)">
                        <el-link :underline="false" style="color: #909399" @click="cources(it.id)">{{ it.title }}</el-link>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!--        导航-->
      </div>
          <!-- 课件展示 -->
          <div class="hotcontext" v-show="top_artice" style="clear: both;" >
            <!--   课程导航 -->
            <!--    热门课程    -->
            <div class="big_con_lin1">
              <el-link :underline="false" style="color: darkgray" @click="ccc">
                <i class="el-icon-caret-right"></i>
                {{top_artice.pname}}
              </el-link>
            </div>
            <div class="big_con_lin2" >
              <el-link :underline="false" style="color: darkgray" @click="ccc">
                {{top_artice.pdescribe}}
                <i class="el-icon-arrow-right"></i>
              </el-link>
            </div>
            <!--   不同课程展示-->
          </div>
          <div class="big_img">
            <ul>
              <li v-for="(item,index) in top_artice.imgs" :ref='item.title+index' @mouseleave="bianxiao(item.title+index)"  @mouseenter="bianda(item.title+index)">
                <a @click="tiaozhuan(item.id)">
                  <div class="kechengs">
                    <img :src="item.cover" class="zhanshiimg">
                    <span>{{ item.title }}</span><br/>
                    <span>${{ item.price }}</span>
                  </div>
                </a>
              </li>
            </ul>
          </div>
      </div>
      <div v-for="item in artice" v-if="item.imgs!=null">
        <div class="context">
          <div class="big_con_lin1">
            <el-link :underline="false" style="color: darkgray" @click="ccc">
              <i class="el-icon-caret-right"></i>
              {{item.pname}}
            </el-link>
          </div>
          <div class="big_con_lin2" >
            <el-link :underline="false" style="color: darkgray" @click="ccc">
              {{item.pdescribe}}
              <i class="el-icon-arrow-right"></i>
            </el-link>
          </div>
          </div>
          <!--   不同课程展示-->
        <div class="big_img">
          <ul>
            <li v-for="(items,index)  in item.imgs" @click="tiaozhuan(items.id)" :ref='items.title+index' @mouseleave="bianxiao(items.title+index)"  @mouseenter="bianda(items.title+index)">
              <a @click="tiaozhuan(items.id)">
                <div class="kechengs">
                  <img :src="items.cover" class="zhanshiimg">
                  <span style="text-align: left">{{ items.title }}</span><br/>
                  <span style="text-align: left">${{ items.price }}</span>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "index",
  data() {
    return {
      activeIndex: ' ',
      //轮播图
      imgs: [],
      //上册分类对象
      top_artice:[],
      //下册对象
      artice:[],
      menuData:[],
      children: [],
      aaa: false,
      beijing: "",
    }
  },
  created() {
    this.init();
  },
  methods: {
    //跳转到课程详情页面
    ccc(){
      this.$router.push("/k1")
    },
    cources(id){
      this.$router.push({
        path:'/k1',
        query:{
          key:id
        }
      })
    },
    tiaozhuan(id) {
      this.$router.push({
        path:'/courseDetails',
        query:{
          key:id
        }
      })
    },
    init(){
      //轮播
      var that= this;
      that.$http.get("/home/banner/web/getAllBanner").then(function (resp){
        that.imgs=resp.data.result;
      })
      //分区
      that.$http.get("/home/precinct/web/getAllPrecinct").then(function (resp){
        for (let i = 0; i < resp.data.result.length; i++) {
          that.$http.post("/home/precinct/web/selectFindKeChengByPid?pId="+resp.data.result[i].pid).then(function (re){
            resp.data.result[i].imgs=re.data.result;
          })
        }

        that.top_artice=resp.data.result[0];
        for (let i = 1; i < resp.data.result.length; i++) {
          that.artice.push(resp.data.result[i])
          // console.log(that.artice);
        }
      })
      //导航
      this.$http.post("/core/SubandCourse/getSubjects").then(function (resp){
        that.menuData=resp.data.result;
      })
    },

    bianxiao(item){
      var a =this.$refs[item][0].children[0]
      a.className=""
    },
    bianda(item){
      var a =this.$refs[item][0].children[0]
      a.className="yinying"
    },

    changeWidth(item, dom) {
      this.$nextTick(() => {
        var abc = item.title;

        this.$refs[abc][0].style.background = "salmon";
      })
      // this.$refs

      this.aaa = true;
      this.children = item.children
    },
    hideWidth() {
      this.aaa = false;
    },
    back(item) {
      var abc = item.title;
      this.$refs[abc][0].style.background = "";
    }
  }
}
</script>

<style scoped>
.yinying{
  position: relative;

  top: -3px;

}
#bai{
  background: #F5F5F5 ;
}
#daohang {

  width: 200px;
  z-index: 1000;
  position: relative;
  top: -399px;
  left: 12%;
  height: 399px;

}

.el-cascader-panel {
  background: white;
}

#lunbo {
  height: 400px;
}

#big {
  background: rgb(228, 228, 228);
}

#big_ttt {
  background: #E4E4E4;
}

.hotcontext {
  margin-left: 12%;
  margin-right: 12%;
  margin-top: 30px;

}

.hotcontext:after {
  clear: both;
  content: "";
  width: 0;
  height: 10px;
  display: block;
  visibility: hidden;
}

.context {

  margin-left: 12%;
  margin-right: 12%;
  margin-top: 30px;
  padding-bottom: 20px;
}

.context:after {
  clear: both;
  content: "";
  width: 0;
  height: 0;
  display: block;
  visibility: hidden;
}

.big_con_lin1 {
  display: inline;
  float: left;

}
a{ text-decoration:none}

.big_con_lin2 {
  display: inline;
  float: right;
}

.big_img > ul > li {
  width: 20%;
  height: 204px;
  margin-bottom: 20px;
  border-radius: 9px;
}

.kechengs {
  width: 90%;
  margin: auto;
  padding: 0px;
  background: #FFFFFF;
  border-radius: 9px;
}

.el-menu {
  width: 200px;
  height: 100%;
  z-index: 100
}

.zhanshiimg {
  width: 100%;
  height: 140px;
}

ul {
  list-style: none;
  padding: 0px;
}

.big_img > ul > li {
  float: left;
}

.big_img {
  margin-left: 12%;
  margin-right: 12%;

}

.big_img > ul:after {
  clear: both;
  content: "";
  width: 0;
  height: 0;
  display: block;
  visibility: hidden;
}

.kechengs > img {
  border-radius: 8px 8px 0px 0px;
}

.zi_div3 > ul:after{content:"";display:block;clear:both;}

.zi_div3 > ul > li {
  color: #909399;
  font-size: 16px;
  float: left;
  padding-left: 10px;
  margin-top: -8px;
  padding-bottom: 5px;
}

.zi_div2 {
  font-size: 15px;
  padding-bottom: 15px;

}

#zi > ul:after {
  clear: both;
  content: "";
  width: 0;
  height: 0;
  display: block;
  visibility: hidden;
}

#zi > ul > li {
  text-align: center
}

#zi {
  position: absolute;
  left: 200px;
  top: 0px;
  width: 280px;
  background: white;
  height: 400px;

}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#caidan {
  width: 200px;
  height: 100%;
  background: black;
  opacity: 0.65

}

.caidan_li {
  width: 100%;
  height: 20%;

}

.caidan_big {
  color: white;
  padding-top: 26px;
  justify-content: space-between;
}

.caidan_big:after {
  clear: both;
  content: "";
  width: 0;
  height: 0;
  display: block;
  visibility: hidden;
}


</style>
